<template>
  <div class="address">
    <!------------------------------------------------------返回导航------------------------------------------------------------------>
    <HeaderTitle :title="WebName"></HeaderTitle>

    <!------------------------------------------------------评价------------------------------------------------------------------>

    <div class="addressBox">
      <van-cell-group>
        <van-field
          v-model="name"
          label="姓名"
          placeholder="请输入收货人"
          clearable
          :error-message="nameError"
        />
        <van-field
          v-model="tel"
          label="电话"
          placeholder="请输入电话"
          clearable
          :error-message="telError"
        />
        <van-field
          v-model="address"
          label="详细地址"
          placeholder="请填写详细地址"
          :error-message="addressError"
          clearable
        />
      </van-cell-group>
      <van-button type="info" size="large" @click="onSave">保存</van-button>
    </div>
  </div>
</template>
<script>
/* ... */
import HeaderTitle from '@/components/HeaderTitle.vue'
import { addressesNew } from '@/api/api'
export default {
  name: 'editaddress',

  mixins: [],

  components: {
    HeaderTitle
  },

  props: {},

  data () {
    return {
      WebName: '添加收货地址',
      address: '',
      name: '',
      tel: '',
      nameError: '',
      telError: '',
      addressError: ''
    }
  },

  computed: {},

  watch: {},

  created () {
    if (localStorage.getItem('X-Auth-Token')) {
    } else {
      this.$toast.fail('您未曾登陆')
      this.$router.push('./login?tabs=0')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    PostData () {
      let postData = { 'address': this.address, 'phone': this.tel, 'name': this.name }
      addressesNew(this.$qs.stringify(postData))
        .then(res => {
          if (res.data.code === 200) {
            this.$toast('保存成功')
            this.address = ''
            this.name = ''
            this.tel = ''
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 保存
    onSave () {
      if (this.name === '') {
        this.nameError = '用户名不可为空'
      } else if (this.tel === '') {
        this.nameError = ''
        this.telError = '电话号码不可为空'
      } else if (this.address === '') {
        this.nameError = ''
        this.telError = ''
        this.addressError = '详细地址不可为空'
      } else {
        this.nameError = ''
        this.telError = ''
        this.addressError = ''
        this.PostData()
      }
    }
  }
}
</script>

<style lang="less" >
/* ... */

.container {
  margin: 0 15px;
}
.address {
  height: 100%;
  background-color: #f6f6f6;
  .addressBox {
    margin-top: 10px;
    button{
      margin-top: 30px;
    }
  }
}
</style>
